<template>
  <div :class="['kf_group', typeStyle === 'kf' || typeStyle === 'kf_1' ? 'textAlign': '']">
    <button
      v-if="typeStyle === 'kf'"
      class="kf"
      :style="'background:' + attr.button_background +
        ';border-color:' + attr.button_border_background +
        ';border-width:' + attr.button_border_width + 'px' +
        ';font-size:' + attr.font_size_button + 'px'+
        ';color:' + attr.color_button +
        ';font-weight:' + attr.font_weight_button +
        ';letter-spacing:' + attr.letter_spacing_button + 'px' +
        ';width:' + attr.button_width + '%' +
        ';border-radius:' + attr.button_border_radius + 'px' +
        ';height:' + attr.button_height + 'px'"
    >{{ attr.button_text }}</button>
    <button
      v-if="typeStyle === 'kf_1'"
      class="kf_1"
      :style="'background:' + attr.button_background +
        ';border-color:' + attr.button_border_background +
        ';border-width:' + attr.button_border_width + 'px' +
        ';font-size:' + attr.font_size_button + 'px'+
        ';color:' + attr.color_button +
        ';font-weight:' + attr.font_weight_button +
        ';letter-spacing:' + attr.letter_spacing_button + 'px' +
        ';width:' + attr.button_width + '%' +
        ';border-radius:' + attr.button_border_radius + 'px' +
        ';height:' + attr.button_height + 'px'"
    >
      <i :style="'font-size:' + attr.font_size_button + 'px'" class="iconfont icon-kefu1" />
      {{ attr.button_text }}
    </button>
    <div v-if="typeStyle === 'kf_2'" class="kf_2">
      <div v-show="attr.message_tip" class="second-triangle-wrapper">
        <img :src="require('@/assets/close.png')">
        <div class="title" :style="'color:'+attr.kf_tip_title_color">{{ attr.kf_tip_title }}</div>
        <div class="content" :style="'color:'+attr.kf_tip_content_color">{{ attr.kf_tip_content }}</div>
      </div>
      <button :style="'background:'+attr.background+';border:1px solid '+attr.background">
        <div class="kf_2_right" :style="'color:'+attr.kf_text_color">
          <i :style="'font-size:' + attr.font_size_button + 'px'" class="iconfont icon-kefu1" />
          {{ attr.kf_text }}
        </div>
        <div
          :class="['online_button', attr.animation ? 'animation_shake':'']"
          :style="'color: '+attr.button_text_color +
            ';background:'+attr.button_background+
            ';border-color:'+attr.button_border_background+
            ';width:'+attr.button_width+'px'+
            ';height:'+attr.button_height+'px'+
            ';line-height:'+attr.button_height+'px'+
            ';border-style: solid'+
            ';border-width:'+attr.button_border_width+'px'+
            ';border-radius:'+attr.button_border_radius+'px'"
        >
          {{ attr.button_text }}
          <div v-show="attr.message_sum" class="kf_message_num">1</div>
        </div>
      </button>
    </div>
    <div v-if="typeStyle === 'kf_3'" class="kf_3">
      <div v-show="attr.message_tip" class="second-triangle-wrapper">
        <img :src="require('@/assets/close.png')">
        <div class="title" :style="'color:'+attr.kf_tip_title_color">{{ attr.kf_tip_title }}</div>
        <div class="content" :style="'color:'+attr.kf_tip_content_color">{{ attr.kf_tip_content }}</div>
      </div>
      <button>
        <div
          class="kf_2_right"
        >
          <div v-show="attr.message_sum" class="kf_message_num">1</div>
          <img
            :style="'border-style:solid;border-width:'+attr.button_border_width+'px'+
              ';border-color:'+ attr.button_border_background+
              ';background:'+ attr.button_background+
              ';border-radius:'+attr.button_border_radius+'px'"
            :class="[attr.animation ? 'animation_shake':'']"
            :src="require('@/assets/kf_logo.png')"
          >
        </div>
        <div
          class="online_button"
          :style="'color:'+attr.button_color +
            ';font-size:'+attr.button_font_size+'px'"
        >
          {{ attr.button_text }}
        </div>
      </button>
    </div>
    <div v-if="typeStyle === 'kf_4'" class="kf_4">
      <div v-show="attr.message_tip" class="second-triangle-wrapper">
        <img :src="require('@/assets/close.png')">
        <div class="title" :style="'color:'+attr.kf_tip_title_color">{{ attr.kf_tip_title }}</div>
        <div class="content" :style="'color:'+attr.kf_tip_content_color">{{ attr.kf_tip_content }}</div>
      </div>
      <button :style="'background:'+attr.background">
        <div class="kf_2_right">
          <div
            :style="'border-style:solid;background:'+attr.button_background +
              ';color:'+attr.button_color+
              ';border-color:'+attr.button_border_background+
              ';border-width:'+attr.button_border_width+'px' +
              ';border-radius:'+attr.button_border_radius+'px' +
              ';border-radius:'+attr.button_border_radius+'px' +
              ';width:'+attr.width+'px' +
              ';height:'+attr.height+'px' +
              ';line-height:'+attr.height+'px' +
              ';font-size:'+attr.button_font_size+'px'"
            :class="[attr.animation && attr.button_item_num === '1' ? 'animation_shake':'', attr.message_sum && attr.button_item_num === '1' ? 'item_right':'']"
          >{{ attr.button_text_1 }}</div>
          <div
            :style="'border-style:solid;background:'+attr.button_background +
              ';color:'+attr.button_color+
              ';border-color:'+attr.button_border_background+
              ';border-width:'+attr.button_border_width+'px' +
              ';border-radius:'+attr.button_border_radius+'px' +
              ';border-radius:'+attr.button_border_radius+'px' +
              ';width:'+attr.width+'px' +
              ';height:'+attr.height+'px' +
              ';line-height:'+attr.height+'px' +
              ';font-size:'+attr.button_font_size+'px'"
            :class="[attr.animation && attr.button_item_num === '2' ? 'animation_shake':'', attr.message_sum && attr.button_item_num === '2' ? 'item_right':'']"
          >{{ attr.button_text_2 }}</div>
          <div
            :style="'border-style:solid;background:'+attr.button_background +
              ';color:'+attr.button_color+
              ';border-color:'+attr.button_border_background+
              ';border-width:'+attr.button_border_width+'px' +
              ';border-radius:'+attr.button_border_radius+'px' +
              ';border-radius:'+attr.button_border_radius+'px' +
              ';width:'+attr.width+'px' +
              ';height:'+attr.height+'px' +
              ';line-height:'+attr.height+'px' +
              ';font-size:'+attr.button_font_size+'px'"
            :class="[attr.animation && attr.button_item_num === '3' ? 'animation_shake':'', attr.message_sum && attr.button_item_num === '3' ? 'item_right':'']"
          >{{ attr.button_text_3 }}</div>
        </div>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KfGroup',
  props: {
    typeStyle: {
      type: String,
      default: 'button'
    },
    typeSeat: {
      type: String,
      default: ''
    },
    attr: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {}
}
</script>

<style scoped lang="scss">
  .textAlign {
    text-align: center;
  }
  .kf_group {
    .icon-kefu1 {
      padding: 1px 3px 0 0;
      font-size: 22px;
    }
    .kf_message_num {
      border-radius: 50%;
      background: red;
      color: white;
      text-align: center;
      width: 15px;
      height: 15px;
      line-height: 15px;
      position: absolute;
      top: -7px;
      right: -5px;
      font-size: 12px;
      z-index: 1;
    }
    .second-triangle-wrapper {
      border: 1px solid #ddd;
      width: 70%;
      min-height:70px;
      position: relative;
      background: white;
      border-radius: 3px;
      margin-bottom: 15px;
      margin-right: 20px;
      word-break: break-all;
      img {
        width: 8px;
        height: 8px;
        position: absolute;
        right: 7px;
        top: 7px;
      }
      .title {
        font-weight: 600;
        font-size: 14px;
        margin: 6px 10px;
        color: rgb(0, 0, 0);
      }
      .content {
        font-size: 12px;
        margin: 0px 10px;
        color: #666;
      }
    }
    .second-triangle-wrapper:before {
      content: '';
      border: inherit;
      padding: 0.5em;
      position: absolute;
      background: inherit;/**不加这个的话你会发现 这个伪元素不会将div的border－top给覆盖掉,bg-image默认是none,bg-color默认是transparent*/
      right: 15px;
      bottom: -8px;
      transform: rotate(45deg);
      border-left: 0;
      border-top: 0;
      border-radius: 3px;
    }
    .kf {
      border: 1px solid rgb(32, 30, 30);
      background: white;
      width: 90%;
      height: 40px;
      border-radius: 20px;
    }
    .kf_1 {
      img {
        width: 20px;
        height: 20px;
        margin: 0 8px;
      }
      border: 1px solid rgb(32, 30, 30);
      background: rgb(32, 30, 30);
      color: white;
      width: 90%;
      height: 40px;
      margin: 0 auto;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .kf_2 {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: flex-end;
      button {
        background: rgb(32, 30, 30);
        width: 100%;
        height: 60px;
        color: white;
        border: 1px solid black;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .kf_2_right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 13px;
          font-weight: 600;
          position: relative;
          img {
            width: 20px;
            height: 20px;
            margin: 0 8px;
          }
        }
        .online_button {
          min-width: 80px;
          height: 30px;
          background: rgb(248, 89, 89);
          text-align: center;
          line-height: 25px;
          font-size: 15px;
          font-weight: 700;
          position: relative;
        }
      }
    }
    .kf_3 {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      .kf_2_right {
        position: relative;
        img {
          background: rgba(248, 89, 89, 1);
          border-radius: 50%;
          padding: 6px;
          width: 40px;
        }
      }
      .online_button {
        font-weight: 600;
        color: rgba(248, 89, 89, 1);
      }
      button {
        margin-right: 10px;
        border: none;
        background: none;
      }
    }
    .kf_4 {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      .kf_2_right {
        position: relative;
        img {
          background: rgba(248, 89, 89, 1);
          border-radius: 50%;
          padding: 6px;
          width: 40px;
        }
        div {
          background: rgba(248, 89, 89, 1);
          color: white;
          min-width: 75px;
          height: 30px;
          line-height: 30px;
          margin-bottom: 8px;
          border-radius: 5px;
          font-weight: 600;
          font-size: 14px;
          position: relative;
        }
        div:nth-child(1) {
          /*animation: shake 2.5s infinite;*/
        }
        .item_right:before {
          content: "1";
          width: 20px;
          height: 20px;
          background: red;
          text-align: center;
          line-height: 20px;
          border-radius: 50%;
          position: absolute;
          top: -7px;
          right: -7px;
        }
      }
      .online_button {
        color: rgba(248, 89, 89, 1);
      }
      button {
        margin-right: 10px;
        border: none;
        background: none;
      }
    }
    .animation_shake {
      animation: shake 2.5s infinite;
    }
    @keyframes shake {
      0%,100%{
        /*transition-timing-function: cubic-bezier(0.215,0.61,0.355,1); !*贝塞尔曲线 ： X1 Y1 X2 Y2*!*/
        transform:rotate(0deg); /*设置只在Z轴上移动*/
      }
      50%{
        /*transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);*/
        transform:rotate(-10deg);
      }
      55%{
        /*transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);*/
        transform:rotate(10deg);
      }
      60%{
        /*transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);*/
        transform:rotate(-10deg);
      }
      45%{
        /*transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);*/
        transform:rotate(10deg);
      }
      40%{
        /*transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);*/
        transform:rotate(-10deg);
      }
      35%{
        transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
        transform:rotate(10deg);
      }
    }
  }
</style>
